<template>
  <div>
    <pt-search :params="params" :config="config" label-width="110px" @search="search"/>
    <pt-table
      :columns="columns"
      :dataSource="tableData"
      :options="options"
      :fetch="getTableList"
      :pagination="pagination" />
    <el-dialog title="骑手信息" v-dialogDrag :visible.sync="dialogDetail" width="600px">
      <div class="item-img" v-if="imgDetail.idcardpositiveload">
        <div class="title">身份证正反面</div>
        <div class="img-list">
          <pt-upload class="img" v-for="item in imgDetail.idcardpositiveload.split(',')" :key="item" :disabled="true" :upLoadImg="item" />
        </div>
      </div>
      <div class="item-img" v-if="imgDetail.otherfileload">
        <div class="title">其他证件</div>
        <div class="img-list">
          <pt-upload class="img" v-for="item in imgDetail.otherfileload.split(',')" :key="item" :disabled="true" :upLoadImg="item" />
        </div>
      </div>
      <div class="item-img" v-if="imgDetail.bankaccount">
        <div class="title">其他证件</div>
        <div class="list"><div class="name">银行卡：</div><div class="msg">{{imgDetail.bankaccount}}</div></div>
        <div class="list"><div class="name">开户行：</div><div class="msg">{{imgDetail.bankname}}</div></div>
        <div class="list"><div class="name">支行信息：</div><div class="msg">{{imgDetail.branchinformation}}</div></div>
      </div>
    </el-dialog>
    <el-dialog title="审核补充信息" v-dialogDrag :visible.sync="dialogPass" width="600px">
      <el-form :model="matForm" ref="ruleForm" label-position="right" size="small" label-width="110px">
        <el-form-item v-if="selectAgentList.length" label="分配子分区" prop="agentid" :rules="[{ required: true, message: '请选择一个子分区', trigger: 'change' }]">
          <el-select v-model="matForm.agentid" @change="setLvlup"  placeholder="请选择" size="small">
            <el-option v-for="item in selectAgentList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="跑腿抽成" prop="coefficient" :rules="[{required: true, message: '跑腿抽成比例未填', trigger: 'blur'}]">
          <el-input-number v-model="matForm.coefficient" :min='0' :max='100' :precision='1' /> %
        </el-form-item>
        <el-form-item label="最大配送量" prop="distributionmun" :rules="[{required: true, message: '最大配送量未填', trigger: 'blur'}]">
          <el-input-number v-model="matForm.distributionmun" :min='0' :max='1000' :precision='0' /> 单
        </el-form-item>
        <el-form-item label="骑手等级" prop="creditrating" :rules="[{ required: true, message: '请选择骑手等级', trigger: 'change' }]">
          <el-select v-model="matForm.creditrating"  placeholder="请选择" size="small">
            <el-option v-for="item in lvlupList" :key="item.sortname" :label="item.sortname" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配送物资内容">
          <el-input v-model="matForm.equipment" placeholder="请输入配送物资内容"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPass = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitPass('ruleForm')">通过</el-button>
      </span>
      <pt-tableLoading v-if="submitLoading" />
    </el-dialog>
  </div>
</template>
<script>
  import { shopperEnteringList, batchPass, batchReject, selectLvlup } from '@/api/knight'
  import { agentSubList } from '@/api/com'
  export default {
    inject: ['updateSumTotal'],
    data() {
      return {
        columns: [ // 表单配置
          { prop: "name", label: "联系人", minWidth: 100, align: "left" },
          { prop: "munber", label: "联系电话", minWidth: 100, align: "left" },
          { prop: "idnumber", label: "身份证", minWidth: 160, align: "left" },
          {
            label: "工作性质", minWidth: 100, align: "left",
            render: row => {
              return <span>{row.workType === 1? '全职': '兼职' }</span>
            }
          },
          { prop: "address", label: "工作意向", minWidth: 200, align: "left" },
          { prop: "createtime", label: "申请时间", minWidth: 140, align: "left" },
          { button: true, label: "操作", width: 180, fixed: 'right',
            group: [
              { name: "查看证件", type: "text", onClick: row => this.openImg(row) },
              { name: "通过", type: "text", style: { color: '#8BC34A'}, onClick: row => this.openPass(row) },
              { name: "驳回", type: "text", onClick: row => this.closePass(row.id) }
            ]
          }
        ],
        pagination: { total: 0, page: 0, size: 10, curPage: 1 }, // 分页
        options: { // 表单外观
          mutiSelect: false, //  多选则 mutiSelect
          index: false, // 显示序号
          loading: false, // 表格动画
          initTable: true // 是否一挂载就加载数据
        },
        tableData: [], //表单数据
        config: [
          { key: "mobile", type: "input", label: "手机号", placeholder: "请输入商家手机号" },
          { key: "name", type: "input", label: "商家名称", placeholder: "请输入商家名称" },
          { key: "page", type: "button",
            group: [
              { name: "查看", type: "primary", onClick: () => { } },
              { name: "重置",  type: "info", onClick: () => this.reset() }
            ]
          }
        ],
        params: { page: 0, size: 10, mobile: '', name: '' }, // 搜索参数
        editId: null, // 单个操作d的id
        matForm: {
          agentid: null, // 子分区id
          coefficient: undefined,
          distributionmun: undefined, //最大配送数量
          creditrating: null, // 骑手等级
          equipment: '' // 发放物质
        },
        submitLoading: false, // 获取骑手等级等待
        lvlupList: [], // 骑手等级信息
        dialogPass: false, // 审核通过
        dialogDetail: false,
        selectAgentList: [], // 可以操作的分区代理商
        imgDetail: {} // 查看详情的弹窗
      }
    },
    methods: {
      search() { // 搜索
        this.pagination.curPage = 1
        this.pagination.page = 0
        this.getTableList()
      },
      reset() { // 重置
        this.pagination.curPage = 1
        for (const key in this.params) {
          if (key === "page") {
            this.pagination.page = 0
          } else if (key === "size") {
            this.pagination.size = 10
          } else if (key === "agentIds") {
            this.params[key] = [];
          } else {
            this.params[key] = ""
          }
        }
        this.getTableList()
      },
      openImg(row) { // 查看证据
        this.imgDetail = row
        this.dialogDetail = true
      },
      openPass(row) { // 打开审核通过弹窗
        this.editId = row.id
        this.matForm = {
          agentid: null,
          coefficient: undefined,
          distributionmun: undefined, //最大配送数量
          creditrating: null, // 骑手等级
          equipment: '' // 发放物质
        }
        this.dialogPass = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].resetFields()
        })
        this.getAgentList(row.agentid)
      },
      closePass(id) { // 打开审核拒绝弹窗
        this.$prompt('请输入驳回原因', '驳回骑手申请！', {
          confirmButtonText: '驳回让修改',
          cancelButtonText: '取消',
          inputPattern: /^[\S\n\s]{0,500}$/,
          inputErrorMessage: '最多输入500个字符'
        }).then(({ value }) => {
          this.submitError(id, value)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      submitError(ids1, failurereason) { // 驳回
        this.options.loading = true
        batchReject({ ids1, failurereason }).then(res => {
          if (res.success) {
            this.$message.success('驳回成功！')
            this.updateSumTotal()
            this.getTableList()
          }
        }).finally(() => {
          this.options.loading = false
        })
      },
      submitPass(formName) { // 提交数据
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.matForm }
            params.ids1 = this.editId
            this.submitLoading = true
            batchPass(params).then(res => {
              if (res.success) {
                this.$message.success('审核成功！')
                this.dialogPass = false
                this.updateSumTotal()
                this.getTableList()
              }
            }).finally(() => {
              this.submitLoading = false
            })
          }
        })
      },
      getAgentList(agentId) { // 获取分区代理商
        this.submitLoading = true
        agentSubList({ agentId }).then(res => {
          if (res.success) {
            this.selectAgentList = res.data.children
            if (this.selectAgentList.length === 0) this.getLvlupMsg(agentId)
          }
        }).finally(() => { this.submitLoading = false })
      },
      setLvlup(val) { // 打开通过弹窗
        this.lvlupList = []
        this.matForm.creditrating = null
        this.getLvlupMsg(val)
      },
      getLvlupMsg(agentId) { // 获取骑手等级数据
        const params = { agentId }
        this.submitLoading = true
        selectLvlup(params).then(res => {
          if (res.success) {
            this.lvlupList = res.data
          }
        }).finally(() => { this.submitLoading = false })
      },
      getTableList() { //获取订单数据
        this.options.loading = true
        const params = { ...this.params }
        params.page = this.pagination.page
        params.size = this.pagination.size
        shopperEnteringList(params).then(res => {
          if (res.success) {
            this.tableData = res.data.list
            this.pagination.total = res.data.total
          }
        }).finally(() => {
          this.options.loading = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .item-img{
    .title{
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      background: #f5f5f5;
    }
    .img-list{
      padding: 10px;
      display: flex;
      flex-flow: row wrap;
      .img{
        width: 140px;
        height: 140px;
        &+.img{
          margin-left: 10px;
        }
      }
    }
    .list{
      height: 30px;
      display: flex;
      align-items: center;
    }
  }
</style>
